<script setup lang="ts">
import { ref } from 'vue'

// 用户个人资料数据
const userInfo = ref({
    avatar: 'https://randomuser.me/api/portraits/women/44.jpg',
    name: '李小花',
    status: '备孕中 · 计划2024生宝宝',
    healthData: {
        age: '26',
        height: '165cm',
        weight: '52kg',
        bmi: '19.1'
    },
    basicInfo: [
        { icon: 'calendar', label: '出生日期', value: '1998-05-15' },
        { icon: 'phone', label: '手机号码', value: '138****5678' },
        { icon: 'email', label: '邮箱地址', value: 'li****@gmail.com' }
    ],
    physiologicalInfo: [
        { icon: 'calendar', label: '初次月经年龄', value: '13岁' },
        { icon: 'clock', label: '平均月经周期', value: '28天' },
        { icon: 'water', label: '平均经期长度', value: '5天' }
    ],
    recordStats: [
        { icon: 'calendar-check', name: '月经记录', data: '27次', bgColor: 'bg-pink' },
        { icon: 'thermometer-half', name: '基础体温', data: '69次', bgColor: 'bg-blue' },
        { icon: 'capsules', name: '服药记录', data: '18次', bgColor: 'bg-purple' },
        { icon: 'utensils', name: '饮食记录', data: '32次', bgColor: 'bg-amber' }
    ],
    privacySettings: [
        { icon: 'friends', label: '经期与排卵数据共享', checked: true },
        { icon: 'notification', label: '重要提醒共享', checked: true },
        { icon: 'shield', label: '个人健康数据保密', checked: false }
    ]
})

// 编辑个人资料
const editProfile = () => {
    uni.showToast({
        title: '编辑个人资料',
        icon: 'none'
    })
}

// 设置
const openSettings = () => {
    uni.showToast({
        title: '打开设置',
        icon: 'none'
    })
}

// 返回上一页
const goBack = () => {
    uni.navigateBack()
}

// 查看更多健康数据
const viewMoreHealthData = () => {
    uni.showToast({
        title: '查看更多健康数据',
        icon: 'none'
    })
}

// 管理信息
const manageInfo = (type: string) => {
    uni.showToast({
        title: `管理${type}信息`,
        icon: 'none'
    })
}

// 查看详细信息
const viewDetail = (item: any) => {
    uni.showToast({
        title: `查看${item.label}详情`,
        icon: 'none'
    })
}

// 查看所有记录
const viewAllRecords = () => {
    uni.showToast({
        title: '查看所有记录',
        icon: 'none'
    })
}

// 切换隐私设置
const togglePrivacySetting = (index: number) => {
    userInfo.value.privacySettings[index].checked = !userInfo.value.privacySettings[index].checked
}
</script>

<template>
    <view class="user-profile">
        <!-- 页面头部 -->
        <view class="header">
            <view class="header-left">
                <text class="back-icon" @click="goBack">
                    <text class="iconfont icon-left"></text>
                </text>
                <text class="page-title">个人资料</text>
            </view>
            <text class="settings-icon" @click="openSettings">
                <text class="iconfont icon-settings"></text>
            </text>
        </view>

        <!-- 主内容区 -->
        <scroll-view class="main-content" scroll-y>
            <!-- 头像部分 -->
            <view class="avatar-section">
                <image :src="userInfo.avatar" class="avatar" mode="aspectFill" />
                <view class="user-name">{{ userInfo.name }}</view>
                <view class="user-status">
                    <text class="iconfont icon-circle"></text>
                    <text>{{ userInfo.status }}</text>
                </view>
                <view class="edit-profile-btn" @click="editProfile">
                    <text class="iconfont icon-edit"></text>
                    <text>编辑资料</text>
                </view>
            </view>

            <!-- 健康卡片 -->
            <view class="health-card">
                <view class="health-header">
                    <view class="health-title">
                        <text class="iconfont icon-heart"></text>
                        <text>健康数据</text>
                    </view>
                    <view class="health-action" @click="viewMoreHealthData">更多数据 ></view>
                </view>
                <view class="health-status">
                    <view class="status-item">
                        <view class="status-value">{{ userInfo.healthData.age }}</view>
                        <view class="status-label">年龄</view>
                    </view>
                    <view class="status-item">
                        <view class="status-value">{{ userInfo.healthData.height }}</view>
                        <view class="status-label">身高</view>
                    </view>
                    <view class="status-item">
                        <view class="status-value">{{ userInfo.healthData.weight }}</view>
                        <view class="status-label">体重</view>
                    </view>
                    <view class="status-item">
                        <view class="status-value">{{ userInfo.healthData.bmi }}</view>
                        <view class="status-label">BMI</view>
                    </view>
                </view>
            </view>

            <!-- 分隔 -->
            <view class="section-divider"></view>

            <!-- 基本信息 -->
            <view class="info-section">
                <view class="info-header">
                    <view class="info-title">基本信息</view>
                    <view class="info-action" @click="manageInfo('基本')">管理 ></view>
                </view>
                <view
                    v-for="(item, index) in userInfo.basicInfo"
                    :key="index"
                    class="info-item"
                    @click="viewDetail(item)"
                >
                    <view class="info-label">
                        <text class="iconfont" :class="'icon-' + item.icon"></text>
                        <text>{{ item.label }}</text>
                    </view>
                    <view class="info-value">
                        <text>{{ item.value }}</text>
                        <text class="iconfont icon-right"></text>
                    </view>
                </view>
            </view>

            <!-- 分隔 -->
            <view class="section-divider"></view>

            <!-- 生理信息 -->
            <view class="info-section">
                <view class="info-header">
                    <view class="info-title">生理信息</view>
                    <view class="info-action" @click="manageInfo('生理')">管理 ></view>
                </view>
                <view
                    v-for="(item, index) in userInfo.physiologicalInfo"
                    :key="index"
                    class="info-item"
                    @click="viewDetail(item)"
                >
                    <view class="info-label">
                        <text class="iconfont" :class="'icon-' + item.icon"></text>
                        <text>{{ item.label }}</text>
                    </view>
                    <view class="info-value">
                        <text>{{ item.value }}</text>
                        <text class="iconfont icon-right"></text>
                    </view>
                </view>
            </view>

            <!-- 分隔 -->
            <view class="section-divider"></view>

            <!-- 记录统计 -->
            <view class="record-section">
                <view class="record-header">
                    <view class="record-title">记录统计</view>
                    <view class="record-action" @click="viewAllRecords">查看全部 ></view>
                </view>
                <scroll-view class="record-cards" scroll-x>
                    <view
                        v-for="(item, index) in userInfo.recordStats"
                        :key="index"
                        class="record-card"
                    >
                        <view class="record-icon" :class="item.bgColor">
                            <text class="iconfont" :class="'icon-' + item.icon"></text>
                        </view>
                        <view class="record-name">{{ item.name }}</view>
                        <view class="record-data">{{ item.data }}</view>
                    </view>
                </scroll-view>
            </view>

            <!-- 隐私设置 -->
            <view class="info-section">
                <view class="info-header">
                    <view class="info-title">隐私设置</view>
                </view>
                <view
                    v-for="(item, index) in userInfo.privacySettings"
                    :key="index"
                    class="info-item"
                >
                    <view class="info-label">
                        <text class="iconfont" :class="'icon-' + item.icon"></text>
                        <text>{{ item.label }}</text>
                    </view>
                    <view class="toggle-switch">
                        <switch
                            :checked="item.checked"
                            color="#ff9fb5"
                            @change="togglePrivacySetting(index)"
                        />
                    </view>
                </view>
            </view>
        </scroll-view>
        <tabbar />
    </view>
</template>

<style scoped lang="scss">
.user-profile {
    background-color: #f5f5f5;
    height: 100vh;
}

.header {
    background-color: #ffffff;
    padding: 24rpx 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #f0f0f0;
}

.header-left {
    display: flex;
    align-items: center;
}

.back-icon {
    margin-right: 16rpx;
    font-size: 36rpx;
}

.page-title {
    font-size: 36rpx;
    font-weight: 500;
}

.settings-icon {
    font-size: 36rpx;
    color: #333333;
}

.main-content {
    height: calc(100vh - 114rpx);
    overflow-y: auto;
    padding-bottom: 40rpx;
}

.avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    padding: 40rpx 32rpx;
    border-bottom: 2rpx solid #f0f0f0;
}

.avatar {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    margin-bottom: 20rpx;
    border: 4rpx solid #fff;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.user-name {
    font-size: 36rpx;
    font-weight: 600;
    margin-bottom: 8rpx;
    color: #333;
}

.user-status {
    font-size: 26rpx;
    color: #999;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
}

.user-status .iconfont {
    margin-right: 8rpx;
    color: #ff9fb5;
    font-size: 20rpx;
}

.edit-profile-btn {
    font-size: 26rpx;
    color: #ff9fb5;
    background-color: #fff0f3;
    padding: 12rpx 24rpx;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
}

.edit-profile-btn .iconfont {
    margin-right: 8rpx;
}

.section-divider {
    height: 16rpx;
    background-color: #f5f5f5;
}

.health-card {
    background-color: #ffffff;
    margin: 32rpx;
    border-radius: 24rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.health-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 32rpx;
    background-color: #ffeaef;
}

.health-title {
    font-size: 30rpx;
    font-weight: 500;
    color: #ff6b8b;
    display: flex;
    align-items: center;
}

.health-title .iconfont {
    margin-right: 12rpx;
}

.health-action {
    font-size: 24rpx;
    color: #ff6b8b;
}

.health-status {
    display: flex;
    justify-content: space-around;
    padding: 32rpx;
}

.status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.status-value {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 8rpx;
}

.status-label {
    font-size: 24rpx;
    color: #999;
}

.info-section {
    background-color: #ffffff;
    padding: 0 32rpx;
}

.info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 2rpx solid #f5f5f5;
}

.info-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
}

.info-action {
    font-size: 26rpx;
    color: #999;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 0;
    border-bottom: 2rpx solid #f5f5f5;
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: #333;
}

.info-label .iconfont {
    width: 48rpx;
    height: 48rpx;
    margin-right: 20rpx;
    text-align: center;
    color: #ff9fb5;
    font-size: 32rpx;
}

.info-value {
    font-size: 28rpx;
    color: #666;
    display: flex;
    align-items: center;
}

.info-value .iconfont {
    margin-left: 12rpx;
    color: #ccc;
    font-size: 24rpx;
}

.record-section {
    background-color: #ffffff;
    padding: 32rpx;
    margin-bottom: 32rpx;
}

.record-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32rpx;
}

.record-title {
    font-size: 32rpx;
    font-weight: 500;
}

.record-action {
    font-size: 26rpx;
    color: #999;
}

.record-cards {
    display: flex;
    white-space: nowrap;
    margin-bottom: 16rpx;
}

.record-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 220rpx;
    background-color: #f9f9f9;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-right: 24rpx;
}

.record-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16rpx;
    color: white;
    font-size: 32rpx;
}

.record-name {
    font-size: 24rpx;
    font-weight: 500;
    margin-bottom: 8rpx;
}

.record-data {
    font-size: 20rpx;
    color: #999;
}

.bg-pink {
    background-color: #ff9fb5;
}

.bg-blue {
    background-color: #64b5f6;
}

.bg-purple {
    background-color: #ba68c8;
}

.bg-amber {
    background-color: #ffb74d;
}

.toggle-switch {
    transform: scale(0.8);
}
</style>
